<template>
  <view class='selected_list'>
    <view  v-for='(option,i) in options' :key='i' @tap='selectOption(option,i)'>
      <view :class='{on1: type == 1 && option.is_show ,on2: type == 2 && option.is_show}'>
        {{option.option}}
        <view class='close_btn' v-if='type == 1 && option.is_show'>
          <view></view>
          <text class='iconfont icon-guanbi'></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      type: {         // 选中时的显示类型
        type: Number,
        default: 1
      },
      mode: {         // 0 为单选模式   1为多选模式
        type: Number,
        default: 0
      },
      list: {         // 传入的选项数组
        type: Array,
        default() {
          return []
        }
      },
      index: {         // 单选模式选中的option index
        type: Number,
        default: null
      },
      index_arr: {      // 多选模式选中的option index数组
        type: Array,
        default() {
          return []
        }
      },
    },
    data() {
      return {
        options: []
      }
    },
    watch: {
      list(arr) {
        this.pushData(arr)
      }
    },
    mounted() {
      this.pushData(this.list)
    },
    methods: {
      // 选择选项
      selectOption(option,i) {
        let index = null;
        let content = null;
        // 单选
        if(this.mode == 0) {
          if(this.index != null) {
            this.options.forEach(val => {
              val.is_show = false;
            })
            index = i;
            content = option.option;
            option.is_show = true;
          }else {
            if(option.is_show) {
              index = null;
              content = ""
              option.is_show = false
            }else {
              this.options.forEach(val => {
                val.is_show = false;
              })
              index = i;
              content = option.option;
              option.is_show = true;
            }
          }
          
        }else {
          // 多选
          index = [];
          content = [];
          option.is_show = !option.is_show;
          this.options.forEach((val,i) => {
            if(val.is_show) {
              index.push(i);
              content.push(val.option);
            }
          })
          
        }
        let obj = {
          index,
          content
        }
        // 返回下标和选中内容
        this.$emit('selected',obj)
      },
      // 处理数据
      pushData(arr) {
        this.options = [];
        arr.forEach((option,i) => {
          let obj = {
            option,
            is_show: false
          }
          if(this.mode == 0) {
            if(this.index == i) {
              obj.is_show = true
            }
          }else {
            this.index_arr.forEach(val => {
              if(val == i) {
                obj.is_show = true
              }
            })
          }
          this.options.push(obj)
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .selected_list {
    width: 100%;
    >view {
      width: 33.333%;
      height: 60upx;
      display: inline-block;
      position: relative;
      margin-bottom: 10upx;
      >view {
        width:220upx;
        height:60upx;
        box-sizing: border-box;
        border-radius:6upx;
        overflow: hidden;
        font-size: 26upx;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        .close_btn {
          width:46upx;
          height:36upx;
          position: absolute;
          right: 0;
          bottom: 0;
          >view {
            width: 66upx;
            height: 100%;
            position: absolute;
            bottom: -12upx;
            right: -24upx;
            transform: rotate(-45deg);
            background: #0084FF;
          }
          >text {
            position: absolute;
            right: -3upx;
            bottom: -4upx;
            font-size: 24upx;
            color: #fff;
            transform: scale(0.6)
          }
        }
      }
      .on1 {
        border:1px solid #0084FF;
        color: #0084FF;
        background:rgba(240,248,255,1);
      }
      .on2 {
        color: #ccc;
      }
    }
  }
</style>